<template>
  <div class="app-container">
    <div class="warp_padding">      
    <div>     
        <bars></bars>       
    </div>     
      <div class="yeartit">
        <el-form :inline="true" :model="formDate" class="demo-form-inline">
          <el-form-item label="">
              <label style="color:#666">年份:</label>
              <el-date-picker v-model="formDate.selyear" size="mini" type="year" value-format="yyyy" placeholder="选择年" style="width:120px;">
              </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleFilter" size="mini">查询</el-button>
          </el-form-item>
        </el-form>
        <!-- <el-date-picker v-model="formDate.selyear" type="year" value-format="yyyy" placeholder="选择年">
              </el-date-picker> -->
        <div class="yearitem">
          <p>年度课时统计主讲（单位：{{ yeaNum.mainLessonNum }}节）全年： 共 <span>{{ yeaNum.allLessonNum }}</span>节</p>  
        </div> 
      </div>      
      <el-table  :data="users"   :cell-style="cellStyle" :header-cell-style="rowClass" style="width: 100%"> 
        <el-table-column prop="areaName" label="区县/月份" min-width="15%"></el-table-column>
        <el-table-column prop="jan" label="一月" min-width="10%"></el-table-column>
        <el-table-column prop="feb" label="二月" min-width="10%"></el-table-column>
        <el-table-column prop="mar" label="三月" min-width="10%"></el-table-column>
        <el-table-column prop="apr" label="四月" min-width="10%"></el-table-column>
        <el-table-column prop="may" label="五月" min-width="10%"></el-table-column>
        <el-table-column prop="jun" label="六月" min-width="10%"></el-table-column>
        <el-table-column prop="jul" label="七月" min-width="10%"></el-table-column>
        <el-table-column prop="aug" label="八月" min-width="10%"></el-table-column>
        <el-table-column prop="sept" label="九月" min-width="10%"></el-table-column>
        <el-table-column prop="oct" label="十月" min-width="10%"></el-table-column>
        <el-table-column prop="nov" label="十一月" min-width="10%"></el-table-column>
        <el-table-column prop="dece" label="十二月" min-width="10%"></el-table-column>        
        <el-table-column prop="countNum" label="全部" min-width="15%"></el-table-column>    
      </el-table>   
  </div>
  </div>
</template>

<script>
  import bars from '../hourchar/bar'
  import { sheetList } from '@/api/echarts'
  
    export default {
      data() {
        return {
          users:[],
          yeaNum:'',          
          formDate:{
            selyear:'2018'
            // year:'2018'
          }
        }
      },
      mounted() {
        this.getUser();
      },      
      methods: {
        cellStyle(){
          return "text-align:center"
        },
        rowClass() {
          return "text-align:center"
        },
        handleFilter () {
           this.getUser()
        },
        //获取用户列表
        getUser (year) {        
          sheetList( this.formDate.selyear ).then((res) => { 
            // console.log(res.data)
            this.users = res.data.countTableList;
            this.yeaNum = res.data         
          });
        }
      },
      components: {
        bars
      }
    }
  </script>
<style scoped lang="scss">
    .hourchar{
      padding:20px;
      .yeartit{
        margin-top:50px;
        position: relative;
        .yearitem {
          position:absolute;
          top:0px;
          left:260px;
          color:#666;
        }
      }
    }
</style>